<template>
  <el-drawer
    v-if="visible"
    :visible.sync="visible"
    :with-header="false"
    :append-to-body="true"
    size="80%"
  >
    <div class="title">
      <div class="title-text">领瓶选择</div>
    </div>
    <div class="c-content">
      <el-table-form ref="form">
        <el-form-item :table-form-merge="2" label="领瓶时间:" prop="createTime">
          <el-date-picker
            v-model="createTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            unlink-panels
            :default-time="['00:00:00', '23:59:59']"
            :clearable="false"
          />
        </el-form-item>
        <el-form-item label="所属机构：">
          <el-tree-select
            v-model="form.orgId"
            clearable
            class="tree-select"
            :popover-width="360"
            :select-params="{
              clearable: true,
              placeholder: '请选择',
              loading: $loadingPlugin.getTreeData,
            }"
            :tree-params="{
              'expand-on-click-node': false,
              'highlight-current': true,
              'filterable': true,
              props: {
                value: 'orgId',
                label: 'orgName',
                disabled: 'disabled',
              },
              data: treeData,
            }"
            @node-click="selectTreeChange"
            @select-clear="closeTree"
          />
        </el-form-item>
        <el-form-item label="配送员名称：">
          <el-select v-model="form.userId" clearable filterable class="userList" placeholder="请选择">
            <el-option
              v-for="(item,index) in ownerList"
              :key="index"
              :label="item.userName"
              :value="item.userId"
            />
          </el-select>
        </el-form-item>
        <template v-slot:btns>
          <el-button
            v-permission="1"
            type="primary"
            @click="search"
          >查询</el-button>
        </template>
      </el-table-form>
      <lb-table
        ref="lbTable"
        border
        :height="358"
        highlight-current-row
        element-loading-text="加载中"
        :column="userTableData.column"
        :data="userTableData.data"
        pagination
        :total="userTableData.total"
        :immediate-fetch="true"
        @fetch="getCustormerInfo"
      />
    </div>
  </el-drawer>
</template>

<script>
  import { fillingSelect, queryOwnersList } from '@/api'
  import { csmTypeMap } from '@/utils/map'
  import getTreeData from '@/utils/jsonTree'
  import { mapGetters } from 'vuex'
  import dayjs from 'dayjs'
  import { parseTime } from '@/utils'

  export default {
    name: 'filling-typeIn',
    data() {
      return {
        csmTypeMap,
        visible: false,
        ownerList: [],
        treeData: [],
        createTime: [dayjs().startOf('day'), dayjs().endOf('day')],
        form: {
          orgId: '',
          userId: ''
        },
        userTableData: {
          data: [],
          total: 0,
          column: [
            {
              type: 'index'
            },
            {
              prop: 'invenBillCode',
              label: '单号',
              width: 160
            },
            {
              prop: 'operatorTime',
              label: '领瓶时间',
              width: 160,
              render: (h, { row }) => row.operatorTime && <span>{ parseTime(row.operatorTime, '{y}-{m}-{d} {h}:{i}:{s}') }</span>
            },
            {
              prop: 'operator',
              label: '领瓶人'
            },
            {
              prop: 'orgName',
              label: '所属机构'
            },
            {
              prop: 'count1',
              label: '领瓶数量'
            },
            {
              prop: 'auditTime',
              label: '审核时间',
              render: (h, { row }) => row.auditTime && <span>{ parseTime(row.auditTime, '{y}-{m}-{d} {h}:{i}:{s}') }</span>
            },
            {
              prop: 'auditor',
              label: '审核人'
            },
            {
              prop: 'invenBillCode',
              label: '出库瓶号'
            },
            {
              label: '操作',
              align: 'center',
              fixed: 'right',
              width: 110,
              render: (h, { row, $index }) => {
                return (
                <div>
                  <el-link
                      underline={false}
                      size='mini'
                      onClick={() => this.typeIn(row, $index)}
                    >
                      导入
                    </el-link>
                </div>
              )
              }
            }
          ]
        }
      }
    },
    computed: {
      ...mapGetters(['orgList', 'userInfo'])
    },
    methods: {
      open() {
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          this.getDetaultTreeData()
        })
      },
      // 获取所属机构数据
      async getDetaultTreeData() {
        const data = this.orgList.map((item) => ({
          label: item.name,
          ...item
        }))
        this.treeData = getTreeData(data)
        this.getOwnerList(this.userInfo.orgId)
      },
      // 选择所属机构
      selectTreeChange(value) {
        const martchOrg = this.orgList.find((item) => item.orgSNNo === value.orgSNNo)
        this.getOwnerList(martchOrg.orgId)
      },
      async getOwnerList(orgId) {
        const res = await queryOwnersList({ orgId })
        this.ownerList = res.data
      },
      closeTree(v) {
        this.form.withdrawId = ''
        this.ownerList = []
      },
      closed() {
        this.createTime = [dayjs().startOf('day'), dayjs().endOf('day')]
        this.form = {
          orgId: '',
          userId: ''
        }
      },
      search() {
        this.$refs.lbTable.fetch({ currentPage: 1 })
      },
      async getCustormerInfo({ currentPage, pageSize }) {
        var query = {
          currentPage: currentPage,
          pageSize: pageSize,
          params: { ...this.form }
        }
        if (this.createTime && this.createTime.length > 0) {
          query.params.operatorTime = dayjs(this.createTime[0]).format('YYYY-MM-DD HH:mm:ss')
          query.params.operatorTimeEnd = dayjs(this.createTime[1]).format('YYYY-MM-DD HH:mm:ss')
        }
        const res = await fillingSelect(query)
        if (res && res.data) {
          this.userTableData.data = res.data.rows
          if (currentPage === 1) this.userTableData.total = res.data.total
        }
      },
      async typeIn(row) {
        this.visible = false
        this.$emit('toTypeIn', row)
        this.createTime = [dayjs().startOf('day'), dayjs().endOf('day')]
        this.form = {
          orgId: '',
          userId: ''
        }
        this.treeData = []
        this.ownerList = []
        this.userTableData.data = []
      }
    }

  }
</script>

<style lang="scss" scoped>
/deep/.el-drawer__header {
  padding: 15px 20px;
  margin-bottom: 0;
}
.title {
  display: flex;
  padding: 20px 20px 0 20px;
  margin-bottom: 20px;
  .title-text {
    line-height: 25px;
  }
}
.c-content {
  padding: 0 20px;
  overflow-y: auto;
  font-size: 14px;
  font-weight: 400;
}
</style>
